import { View, Text, ScrollView, Image } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro';
import './cart.less'
import { AtIcon, AtButton } from 'taro-ui'
import { useState, useEffect } from 'react'
import http from '../../http/http'


function Cart() {
  //购物车数据
  const [listTop, setListTop] = useState();
  const [listBottom, setListBottom] = useState();
  //总计
  const [allPrice,setAllPrice]=useState(0);
  const getCon=()=>{
    //查询购物车列表
    http({
      url: '/yanghao/queryCart',
      method: 'get',
      data: {
        id: '3ddsada'
      }
    }).then(res => {
      let arrTop = [];
      let arrBottom = [];
      for (let i in res.data) {
        res.data[i].singleCheck=false;
        if (res.data[i].stoke == 0) {
          arrBottom.push(res.data[i]);
        } else {
          arrTop.push(res.data[i]);
        }
      }
      setListTop(arrTop);
      setListBottom(arrBottom);
      //统计总价
      let allPrice=0;
      for(let i in arrTop){
        allPrice+=arrTop[i].num*arrTop[i].sellPrice;
      }
      setAllPrice(allPrice);
    })
  }
  useDidShow(() => {
    getCon();
  })
  //热卖渲染
  const topShow = () => {
    if (listTop != undefined) {
      return listTop.map((v, i) => {
        return <View className='d-f y-c py-2'>
          <View className={v.singleCheck ? 'at-icon at-icon-check check' : 'at-icon at-icon-check noCheck'} onClick={() => singleChecks(v.id)}></View>
          <Image src={v.imageUrl} className='img mx-2' />
          <View className='d-f f-c'>
            <Text style='width:200px'>{v.name}</Text>
            <View className='d-f x-s-b py-2'>
              <View>￥{v.sellPrice}</View>
              <View className={isDelete?'d-f disappear':'d-f'} >
                <View className='num' onClick={() => topReduce(v.id)}>-</View>
                <View className='nums px-1'>{v.num}</View>
                <View className='num' onClick={() => topAdd(v.id)}>+</View>
              </View>
              <View className={!isDelete?'disappear':''} onClick={()=>singleDel(v.id)}>删除</View>
            </View>
          </View>
        </View>
      })
    }
  }
  const bottomShow = () => {
    if (listBottom != undefined) {
      return listBottom.map((v, i) => {
        return <View className='d-f y-c py-2'>
          <View className={v.singleCheck ? 'at-icon at-icon-check check' : 'at-icon at-icon-check noCheck'} onClick={() => singleCheckss(v.id)}></View>
          <Image src={v.imageUrl} className='img mx-2' />
          <View className='d-f f-c'>
            <Text style='width:200px'>{v.name}</Text>
            <View className='d-f x-s-b py-2'>
              <View>￥{v.sellPrice}</View>
              <View className={!isDelete?'disappear':''} onClick={()=>singleDel(v.id)}>删除</View>
            </View>
          </View>
        </View>
      })
    }
  }
  const topAdd = (id) => {
    let arr = [...listTop];
    for (let i in arr) {
      if (arr[i].id == id) {
        arr[i].num++;
      }
    }
    setListTop(arr);
    let allPrice=0;
    for(let i in arr){
      allPrice+=arr[i].num*arr[i].sellPrice;
    }
    setAllPrice(allPrice);
  }
  const topReduce = (id) => {
    let arr = [...listTop];
    for (let i in arr) {
      if (arr[i].id == id) {
        if (arr[i].num != 1) {
          arr[i].num--;
        }
      }
    }
    setListTop(arr);
    let allPrice=0;
    for(let i in arr){
      allPrice+=arr[i].num*arr[i].sellPrice;
    }
    setAllPrice(allPrice);
  }

  const onScroll = (e) => {
    console.log(e.detail)
  }

  const scrollStyle = {
    height: '150px'
  }
  const scrollTop = 0
  const Threshold = 20



  //多删的数组
  const [manyDel,setManyDel]=useState([]);

  //全选复选框
  const [allCheckTop, setAllCheckTop] = useState(false);
  const [allCheckBottom, setAllCheckBottom] = useState(false);
  //单选复选框
  //点击全选
  const allChecksTop = () => {
    let arr=[...listTop];
    for(let i in arr){
      if(allCheckTop){
        arr[i].singleCheck=false;
      }else{
        arr[i].singleCheck=true;
      }
    }
    setAllCheckTop(!allCheckTop);
    setListTop(arr);
  }
  const allChecksBottom=()=>{
    let arr=[...listBottom];
    for(let i in arr){
      if(allCheckBottom){
        arr[i].singleCheck=false;
      }else{
        arr[i].singleCheck=true;
      }
    }
    setAllCheckBottom(!allCheckBottom);
    setListBottom(arr);
  }
  //点击单选复选框
  const singleChecks = (id) => {
    let arr=[...listTop];
    let temp=0;
    for(let i in arr){
      if(arr[i].id==id){
        arr[i].singleCheck=!arr[i].singleCheck;
      }
      if(!arr[i].singleCheck){
        setAllCheckTop(false);
      }
      if(arr[i].singleCheck){
        temp++;
        // let idArr=[];
        // idArr.newPush(id);
        // setManyDel(idArr)
      }
    }
    if(temp==arr.length){
      setAllCheckTop(true);
    }
    setListTop(arr);
  }
  const singleCheckss = (id) => {
    let arr=[...listBottom];
    let temp=0;
    for(let i in arr){
      if(arr[i].id==id){
        arr[i].singleCheck=!arr[i].singleCheck;
      }
      if(!arr[i].singleCheck){
        setAllCheckBottom(false);
      }
      if(arr[i].singleCheck){
        temp++;
      }
    }
    if(temp==arr.length){
      setAllCheckBottom(true);
    }
    setListBottom(arr);
  }

  //全选
  const [countAllCheck,setCountAllCheck]=useState(false);
  const countAllChecks=()=>{
    setCountAllCheck(!countAllCheck);
      if(countAllCheck){
        let arr1=[...listBottom];
        let arr2=[...listTop];
      for(let i in arr1){
        arr1[i].singleCheck=true;
      }
      for(let i in arr2){
        arr2[i].singleCheck=true;
      }
      setAllCheckTop(true);
      setAllCheckBottom(true);
    }else{
      let arr1=[...listBottom];
      let arr2=[...listTop];
      for(let i in arr1){
        arr1[i].singleCheck=false;
      }
      for(let i in arr2){
        arr2[i].singleCheck=false;
      }
      setAllCheckTop(false);
      setAllCheckBottom(false);
    }
  }

  //出现删除
  const [isDelete,setIsDelete]=useState(false);
  const isDel=()=>{
    setIsDelete(!isDelete);
  }

  //删除操作
  const singleDel=(id)=>{
    http({
      url:'/yanghao/delCartById',
      method:'post',
      data:{id}
    }).then(res=>{
      getCon();
    })
  }
  const handleChange = (value) => {
    console.log(value);
    setCheckedList(value);
  }

  // or 使用箭头函数
  // onScrollToUpper = () => {}

  return (
    <View className='bg-out ps-1 py-5'>
      <View className='bg py-2 '>
        <View className='color-w font-w px-4'>购物车</View>
        <View className='d-f x-s-b py-4'>
          <Text className='color-w font-sdl px-4'>共42件宝贝</Text>
          <Text className='color-w font-sdl px-4' onClick={()=>isDel()}>编辑</Text>
        </View>
        <View className='px-4 my-4 font-sdl'>
          <ScrollView
            className='scrollview'
            scrollY
            scrollWithAnimation
            scrollTop={scrollTop}
            style={scrollStyle}
            lowerThreshold={Threshold}
            upperThreshold={Threshold}
          >
            <View className='bg-center '>
              <View className='p-2 bg-white'>
                <View className='d-f y-c '>
                  <View className={allCheckTop ? 'at-icon at-icon-check check' : 'at-icon at-icon-check noCheck'} onClick={() => allChecksTop()}></View>
                  <Text className='px-2'>正在热卖</Text>
                </View>

                {topShow()}

              </View>
            </View>
            <View className='bg-center py-5'></View>


            <View className='p-2 bg-white'>
              <View className='d-f y-c '>
                <View className={allCheckBottom ? 'at-icon at-icon-check check' : 'at-icon at-icon-check noCheck'} onClick={() => allChecksBottom()}></View>
                <Text className='px-2'>已失效</Text>
              </View>

              {bottomShow()}
            </View>
          </ScrollView>
        </View>

      </View>
      {/* 固定定位 */}
      <View className='ps-2 bg-white w-100 d-f y-c x-s-b font-sdl'>
        <View className='d-f y-c my-3 px-1'>
          {/* <View className={countAllCheck ? 'at-icon at-icon-check check' : 'at-icon at-icon-check noCheck'} onClick={() => countAllChecks()}></View> */}
          <Text className='px-1'  onClick={() => countAllChecks()}>全选</Text>
        </View>
        <View className='d-f y-c px-1'>
          <Text className='px-2'>合计：￥{allPrice}</Text>
          <AtButton type='primary' size='small'>结算</AtButton>
        </View>
      </View>
    </View>
  )

}

export default Cart;
